<template>
  <div id="content-nav">
    <div class="content-guide-item position-search-box">
      <div class="guide-position-item">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item>
            <router-link
                :to="{name:'home'}"
            >首页</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item v-for="n in navList" :key="n.code">
            <router-link
                :to="{name:'ResourceGuides'+navList[0].path,query:{code:n.code}}"
            >{{n.title}}</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item href="#">
            {{ title }}
          </a-breadcrumb-item >
        </a-breadcrumb>
      </div>
      <GuideBarSearchComponent
          class="search-item"
          :path="navList[0].path"
          :code="navList[0].code"
      />
    </div>
  </div>
</template>

<script>
import {getTopicChild} from "@/api/CommonApi";
import GuideBarSearchComponent from "@/components/FunctionComponent/GuideBarSearchComponent";


export default {
  name: "contentNav",
  props:{
    title:String,
    topicCode:String
  },
  components:{GuideBarSearchComponent},
  data() {
    return {
      // 导航栏列表
      guides: [],
    }
  },
  computed: {
    navList() {
      let navs = []
      const list = [...this.guides]
      for (let i = 0; i < list.length; i++){
        if(list[i].code === this.topicCode){
          navs.push(list[i])
        }else{
          console.log(list[i].child)
          if(null !== list[i].child){
            list[i].child.forEach(e=>{
              if(e.code === this.topicCode){
                navs.push(list[i])
                navs.push(e)
              }
            })
          }
        }
      }
      return navs
    }
  },
  mounted() {
    this.loadMainGuiderData('cd')
  },
  methods: {
    loadMainGuiderData(topicCode) {
      console.log('loadMainGuiderData')
      getTopicChild(topicCode).then(res => {
        console.log(res)
        const result = res.result || []
        this.guides = result
        console.log(" this.guides = ", this.guides);
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<style lang="less"  scoped>
//phone
@media only screen and (max-width:576px){
    @width: 100vw;
    @height: 6vw;
    #content-nav {
        width: @width;
        height: @height;
        .content-guide-item {
            width: @width;
            height: @height;
            line-height:@height;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .position-search-box {
            padding: 0 2vw;
            height:@height;
            line-height:@height;

            .guide-position-item {
                height:@height;
                line-height:@height;
            }

            .search-item {
                display:none;
            }
        }
    }
}


//pc
@media only screen and (min-width:576px){
    @width: 100vw;
    @height: 60px;
    #content-nav {
        width: @width;
        height: @height;
        .content-guide-item {
            width: @width;
            height: @height;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .position-search-box {
            border-top: 2px solid RGBA(15, 121, 205, 1);
            padding: 0 150px;

            .guide-position-item {
                //border: 1px solid red;
                //width: 300px;
                height: 30px;
            }

            .search-item {

            }
        }
    }
}

</style>
